@use '@/styles/gobal.scss' as *;

.maintenance {
    // padding: $spacing-lg;
    // padding-bottom: pxToRem(48);

    &__title {
        font-size: pxToRem(24);
        color: $text-color;
        margin-bottom: $spacing-lg;
    }

    &__section {
        background: #fff;
        border-radius: $border-radius-lg;
        padding: $spacing-lg;
        margin-bottom: $spacing-lg;
        box-shadow: $box-shadow;

        h3 {
            font-size: pxToRem(18);
            color: $text-color;
            margin-bottom: $spacing-md;
        }
    }

    &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: $spacing-lg;
    }

    &__switch {
        display: flex;
        align-items: center;
        cursor: pointer;

        &Inner {
            width: pxToRem(50);
            height: pxToRem(24);
            background-color: #ddd;
            border-radius: pxToRem(12);
            margin-right: $spacing-sm;
            position: relative;
            transition: background-color $transition-duration;

            &--active {
                background-color: $primary-color;

                .maintenance__switchHandle {
                    transform: translateX(pxToRem(26));
                }
            }
        }

        &Handle {
            position: absolute;
            top: pxToRem(2);
            left: pxToRem(2);
            width: pxToRem(20);
            height: pxToRem(20);
            background-color: #fff;
            border-radius: 50%;
            transition: transform $transition-duration;
        }

        &Text {
            font-size: pxToRem(14);
            color: $text-color-secondary;
        }
    }

    &__form {
        &Group {
            margin-bottom: $spacing-lg;

            label {
                display: block;
                font-size: pxToRem(14);
                color: $text-color;
                margin-bottom: $spacing-sm;
            }

            textarea {
                width: 100%;
                padding: $spacing-sm;
                border: pxToRem(1) solid $border-color;
                border-radius: $border-radius-md;
                resize: vertical;
                font-size: pxToRem(14);
                line-height: 1.5;

                &:focus {
                    outline: none;
                    border-color: $primary-color;
                }
            }
        }
    }

    &__timeRange {
        display: flex;
        align-items: center;
        gap: $spacing-md;
    }

    &__timeInput {
        display: flex;
        gap: $spacing-sm;

        input {
            padding: $spacing-xs $spacing-sm;
            border: pxToRem(1) solid $border-color;
            border-radius: $border-radius-md;
            font-size: pxToRem(14);

            &:focus {
                outline: none;
                border-color: $primary-color;
            }
        }
    }

    &__previewBtn {
        padding: $spacing-xs $spacing-md;
        background-color: transparent;
        border: pxToRem(1) solid $primary-color;
        color: $primary-color;
        border-radius: $border-radius-md;
        cursor: pointer;
        transition: all $transition-duration;

        &:hover {
            background-color: $primary-color;
            color: #fff;
        }
    }

    &__submitBtn {
        padding: $spacing-sm $spacing-xl;
        background-color: $primary-color;
        color: #fff;
        border-radius: $border-radius-md;
        cursor: pointer;
        transition: background-color $transition-duration;

        &:hover {
            background-color: $primary-hover-color;
        }
    }

    &__table {
        border: pxToRem(1) solid $border-color;
        border-radius: $border-radius-md;
        overflow: hidden;

        &Header {
            display: grid;
            grid-template-columns: pxToRem(80) pxToRem(200) pxToRem(200) 1fr pxToRem(120);
            background-color: #fafafa;
            border-bottom: pxToRem(1) solid $border-color;

            >div {
                padding: $spacing-sm $spacing-md;
                font-weight: 500;
                color: $text-color;
            }
        }

        &Body {
            max-height: pxToRem(400);
            overflow-y: auto;
        }

        &Row {
            display: grid;
            grid-template-columns: pxToRem(80) pxToRem(200) pxToRem(200) 1fr pxToRem(120);
            border-bottom: pxToRem(1) solid $border-color;
            transition: background-color $transition-duration;

            &:hover {
                background-color: #fafafa;
            }

            >div {
                padding: $spacing-sm $spacing-md;
                color: $text-color-secondary;
            }
        }
    }
}